<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数式组件</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: grey;
    font-family: '华文行楷';
  }

  h1 {
    margin-bottom: 5px;
  }
</style>
<body>
<div id="container"></div>

<!--引入react核心库-->
<script src="../../js-依赖包/react.development.js"></script>
<!--引入react.dom 用于支出react操作DOM-->
<script src="../../js-依赖包/react-dom.development.js"></script>
<!--引入babel  用于将jsx转换为js-->
<script src="../../js-依赖包/babel.min.js"></script>

<script type="text/babel"> //这里一定要将类型写为babel

// 1. 创建函数组件
function Demo() {
  return <h1>我是函数定义的组件</h1>
}
// 2. 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('container'))

</script>
</body>
</html>